<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>数据统计</title>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2511819_85tptd5wyu8.css">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		html{
			min-width: 1040px;
		}
		body{
			background: #F3F7FA;
		}
		.NewStatistics_container{
			margin: 12px 24px 12px 24px;
		}
		.NewStatistics_record_container{
			display: flex;
			align-items: center;
		}
		.NewStatistics_recordLeft_container{
			flex: 2;
			background: #fff;
			padding: 24px 24px 32px 24px;
			border-radius: 4px;
			margin-right: 16px;
		}
		.NewStatistics_recordRight_container{
			flex: 3;
			background: #fff;
			padding: 24px 24px 32px 24px;
			border-radius: 4px;
		}
		.NewStatistics_recordList_container{
			display: flex;
			align-items: center;
			margin-top: 16px;
		}
		.NewStatistics_recordList_container li{
			padding: 30px 24px;
			flex: 1;
			margin-right: 20px;
			background: #576EF6;
			position: relative;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
		}
		.NewStatistics_recordList_container li:last-child{
			margin-right: 0;
		}
		.NewStatistics_recordList_container li span{
			color: #fff;
			font-size: 16px;
			margin-bottom: 16px;
		}
		.NewStatistics_recordList_container li b{
			font-size: 26px;
			color: #fff;
		}
		.NewStatistics_recordList_container li i{
			position: absolute;
			top: 26px;
			right: 24px;
			color: rgb(255 255 255 / 26%);
			font-size: 70px;
		}
		.NewStatistics_public_title{
			color: #1F2935;
			font-size: 18px;
			font-weight: bold;
		}
		/*charts header*/
		.NewStatistics_charts_container{
			margin-top: 16px;
			background: #fff;
			border-radius: 4px;
		}
		.NewStatistics_ChartsHeader_container{
			padding: 24px 24px 16px 24px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #EFEFEF;
		}
		.NewStatistics_ChartsHeader_title{
			
		}
		.NewStatistics_ChartsHeader_Other_container{
			display: flex;
			align-items: center;

		}
		.NewStatistics_ChartsHeader_OtherList_container{
			margin-right: 32px;
			display: flex;
			align-items: center;
		}
		.NewStatistics_ChartsHeader_OtherList_container li{
			width: 72px;
			height: 30px;
			color: #526070;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F3F7FA;
			margin-right: 16px;
			cursor: pointer;
			border-radius: 2px;
		}
		.NewStatistics_ChartsHeader_OtherList_container li:last-child{
			margin-right: 0;
		}
		.NewStatistics_ChartsHeader_OtherList_active{
			color: #fff !important;
			background: #2074FF !important;
		}
		.NewStatistics_ChartsHeader_OtherTime_container{
			display: flex;
			align-items: center;
		}
		.NewStatistics_ChartsHeader_OtherTimeTitle{
			color: #1F2935;
			font-size: 14px;
			margin-right: 16px;
		}
		.NewStatistics_ChartsHeader_OtherTime_content{
			display: flex;
			align-items: center;
		}
		.public_input_container{
			border: 1px solid #E8EBF0;
			padding: 0 5px 0 8px;
			width: 200px;
			height: 30px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}
		.public_input_container input{
			font-size: 14px;
			color: #1F2935;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border: none;
			background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/8f50206b223d6b32963cb91df944880c.png)no-repeat center right;
			flex: 1;
		}
		.sortLine{
			width: 14px;
			height: 1px;
			margin: 0 8px;
			background: #E8EBF0;
		}
		/*echarts 部分*/
		.NewStatistics_Echarts_container{
			padding: 24px;
		}
		.NewStatistics_EchartsHeader_container{
			display: flex;
			align-items: center;

		}
		.NewStatistics_EchartsHeader_container li{
			border: 1px solid #E8EBF0;
			color: #526070;
			font-size: 14px;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 0;
			cursor: pointer;
		}
		.NewStatistics_EchartsHeader_active{
			background: rgba(32, 116, 255, 0.2) !important;
			border-color: #2074FF !important;
			color: #2074FF !important;
		}
		.NewStatistics_EchartsHeader_container li:last-child{

		}
		.NewStatistics_EchartsHeader_content{
			padding: 24px 0 13px 0;
		}
	</style>
</head>
<body>
	<div class="NewStatistics_container">
		<div class="NewStatistics_record_container">
			<div class="NewStatistics_recordLeft_container">
				<h2 class="NewStatistics_public_title">数据统计</h2>
				<ul class="NewStatistics_recordList_container">
					<li style="background: linear-gradient(to right,#15C7F7,#0996EC);">
						<span>新增客户数</span>
						<b>{$todayAddNum}</b>
						<i class="iconfont iconicon_data_blue"></i>
					</li>
					<li style="background: linear-gradient(to right,#00DBE9,#00B4CF);">
						<span>流失客户数</span>
						<b>{$todayLossNum}</b>
						<i class="iconfont iconicon_data_green"></i>
					</li>
				</ul>
			</div>
			<div class="NewStatistics_recordRight_container">
				<h2 class="NewStatistics_public_title">数据统计</h2>
				<ul class="NewStatistics_recordList_container">
					<li style="background: linear-gradient(to right,#FF88F7,#FF4F9C);">
						<span>客户总数</span>
						<b>{$etNum}</b>
						<i class="iconfont iconicon_data_red1"></i>
					</li>
					<li style="background: linear-gradient(to right,#FCD918,#F8B20A);">
						<span>客户群总数</span>
						<b>{$groupchatNum}</b>
						<i class="iconfont iconicon_data_yellow"></i>
					</li>
					<li style="background: linear-gradient(to right,#FFA763,#FF6E34);">
						<span>群成员总数</span>
						<b>{$groupchatuserNum}</b>
						<i class="iconfont iconicon_data_orange"></i>
					</li>
				</ul>
			</div>
		</div>
		<div class="NewStatistics_charts_container">
			<!-- charts header -->
			<div class="NewStatistics_ChartsHeader_container">
				<h2 class="NewStatistics_public_title">数据统计</h2>
				<div class="NewStatistics_ChartsHeader_Other_container">
					<ul class="NewStatistics_ChartsHeader_OtherList_container">
						<li class="NewStatistics_ChartsHeader_OtherList_active" onclick="one_week()">
							近一周
						</li>
						<li onclick="two_week()">
							近二周
						</li>
						<li onclick="one_month()">
							近一月
						</li>
					</ul>
					<div class="NewStatistics_ChartsHeader_OtherTime_container">
						<span class="NewStatistics_ChartsHeader_OtherTimeTitle">自定义时间</span>
						<div class="NewStatistics_ChartsHeader_OtherTime_content">
							<div class="public_input_container">
								<input type="text" class="" id="test1" placeholder="开始日期">
							</div>
							<div class="sortLine"></div>
							<div class="public_input_container">
								<input type="text" class="" id="test2" placeholder="结束日期">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- echart 部分 -->
			<div class="NewStatistics_Echarts_container">
				<ul class="NewStatistics_EchartsHeader_container">
					<li class="NewStatistics_EchartsHeader_active" data-id="1">客户分析</li>
					<li data-id="2">聊天总数</li>
					<li data-id="3">发送消息数</li>
					<li data-id="4">已回复聊天占比</li>
					<li data-id="5">平均首次回复时长</li>
				</ul>
				<div class="NewStatistics_EchartsHeader_content">
					<div id="main1" style="width: 100%;height:400px;"></div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="/cdn/echarts.min.js"></script>
	<script src="/cdn/jquery.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		function edit_chart(data){
			option1.xAxis.data = data.statistics_date;
			option1.series[0].data = data.new_contact_cnt;
			option1.series[1].data = data.new_apply_cnt;
			option1.series[2].data = data.negative_feedback_cnt;

			option2.xAxis.data = data.statistics_date;
			option2.series[0].data = data.chat_cnt;

			option3.xAxis.data = data.statistics_date;
			option3.series[0].data = data.message_cnt;

			option4.xAxis.data = data.statistics_date;
			option4.series[0].data = data.reply_percentage;

			option5.xAxis.data = data.statistics_date;
			option5.series[0].data = data.avg_reply_time;
			
			var myChart1 = echarts.init(document.getElementById('main1'));
			let op = $('.NewStatistics_EchartsHeader_active').attr('data-id');
			if(op == 1){
				myChart1.setOption(option1,true)
			}else if(op == 2){
				myChart1.setOption(option2,true)
			}else if(op == 3){
				myChart1.setOption(option3,true)
			}else if(op == 4){
				myChart1.setOption(option4,true)
			}else if(op == 5){
				myChart1.setOption(option5,true)
			}
		}
		// 选项卡
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		// 表单
		layui.use('form', function(){
			var form = layui.form;

		  //监听提交
		  form.on('submit(formDemo)', function(data){
		  	layer.msg(JSON.stringify(data.field));
		  	return false;
		  });
		});
		
		function getDays(strDateStart,strDateEnd){
		   var strSeparator = "-"; //日期分隔符
		   var oDate1;
		   var oDate2;
		   var iDays;
		   oDate1= strDateStart.split(strSeparator);
		   oDate2= strDateEnd.split(strSeparator);
		   var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
		   var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
		   iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
		   return iDays ;
		}
		
		// 日期
		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
				,type: 'date'
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					var endDate = $('#test2').val();
					var days = getDays(value,endDate);
					if(days >= 30){
						alert('支持的最大查询跨度为30天');
						return;
					}
					myAjaxPost(false, true, 'statistics.html', { type:'usedate',startDate:value,endDate:endDate}, function (resp) {
						if (resp.status == 'success') {
							var data = resp.data;
							edit_chart(data);
						}else{
							layer.msg(resp.msg);
						}
					});
				 }
			});
			//执行一个laydate实例
			laydate.render({
				elem: '#test2' //指定元素
				,type: 'date'
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					var startDate = $('#test1').val();
					var days = getDays(startDate,value);
					if(days >= 30){
						alert('支持的最大查询跨度为30天');
						return;
					}
					myAjaxPost(false, true, 'statistics.html', { type:'usedate',endDate:value,startDate:startDate}, function (resp) {
						if (resp.status == 'success') {
							var data = resp.data;
							edit_chart(data);
						}else{
							layer.msg(resp.msg);
						}
					});
				 }
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function(){
			myAjaxPost(false, true, 'statistics.html', { type:'first'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#yy_new_contact_cnt').html(data.new_contact_cnt[data.new_contact_cnt.length - 1]);
					$('#yy_negative_feedback_cnt').html(data.negative_feedback_cnt[data.new_contact_cnt.length - 1]);
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					//layer.msg(resp.msg);
				}
			});
		});
		function one_week(){
			myAjaxPost(false, true, 'statistics.html', { type:'one_week'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});		
		}
		function two_week(){
			myAjaxPost(false, true, 'statistics.html', { type:'two_week'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
		function one_month(){
			myAjaxPost(false, true, 'statistics.html', { type:'one_month'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
	</script>
	<!-- 图表 -->
	<script type="text/javascript">
		var myChart1 = echarts.init(document.getElementById('main1'));
		// 指定图表的配置项和数据
		option1 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		    	icon: "circle",
		    	itemGap:40,
		    	x:'center',
		    	y:'top',
		    	itemWidth: 10,  // 设置宽度
		    	itemHeight: 10, // 设置高度
		        data:['新增客户数','成员发起好友申请数','被客户删除拉黑数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value',
		        splitLine: {
		            show: true,
		            lineStyle:{
		               color: ['RGBA(243, 247, 250, 1)'],
		               width: 1,
		               type: 'solid'
		          }
		        },	
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		    },
		    series: [
		        {
		            name:'新增客户数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#5084FF',
		                shadowColor: '#82B1FF',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "#82B1FF",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(67, 172, 255, 0.1)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        },
		        {
		            name:'成员发起好友申请数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#FF882C',
		                shadowColor: 'rgb(255 179 120 / 50%)',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "rgb(255 179 120 / 50%)",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(255, 189, 87, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        },
		        {
		            name:'被客户删除拉黑数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#F75881',
		                shadowColor: '#FF8CAA',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "#FF8CAA",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(247, 88, 129, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        }
		       
		    ]
		};
		option2 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		    	icon: "circle",
		    	itemGap:40,
		    	x:'center',
		    	y:'top',
		    	itemWidth: 10,  // 设置宽度
		    	itemHeight: 10, // 设置高度
		        data:['聊天总数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value',
		        splitLine: {
		            show: true,
		            lineStyle:{
		               color: ['RGBA(243, 247, 250, 1)'],
		               width: 1,
		               type: 'solid'
		          }
		        },	
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		    },
		    series: [
		        {
		            name:'聊天总数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#FF882C',
		                shadowColor: 'rgb(255 179 120 / 50%)',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "rgb(255 179 120 / 50%)",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(255, 189, 87, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        }
		       
		    ]
		};
		option3 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		    	icon: "circle",
		    	itemGap:40,
		    	x:'center',
		    	y:'top',
		    	itemWidth: 10,  // 设置宽度
		    	itemHeight: 10, // 设置高度
		        data:['发消息数'],
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value',
		        splitLine: {
		            show: true,
		            lineStyle:{
		               color: ['RGBA(243, 247, 250, 1)'],
		               width: 1,
		               type: 'solid'
		          }
		        },	
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		    },
		    series: [
		        {
		            name:'发消息数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#FF882C',
		                shadowColor: 'rgb(255 179 120 / 50%)',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "rgb(255 179 120 / 50%)",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(255, 189, 87, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        }
		       
		    ]
		};
		option4 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		    	icon: "circle",
		    	itemGap:40,
		    	x:'center',
		    	y:'top',
		    	itemWidth: 10,  // 设置宽度
		    	itemHeight: 10, // 设置高度
		        data:['已回复聊天占比'],
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value',
		        splitLine: {
		            show: true,
		            lineStyle:{
		               color: ['RGBA(243, 247, 250, 1)'],
		               width: 1,
		               type: 'solid'
		          }
		        },	
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		    },
		    series: [
		        {
		            name:'已回复聊天占比',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#FF882C',
		                shadowColor: 'rgb(255 179 120 / 50%)',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "rgb(255 179 120 / 50%)",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(255, 189, 87, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        }
		       
		    ]
		};
		option5 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		    	icon: "circle",
		    	itemGap:40,
		    	x:'center',
		    	y:'top',
		    	itemWidth: 10,  // 设置宽度
		    	itemHeight: 10, // 设置高度
		        data:['平均首次回复时长'],
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value',
		        splitLine: {
		            show: true,
		            lineStyle:{
		               color: ['RGBA(243, 247, 250, 1)'],
		               width: 1,
		               type: 'solid'
		          }
		        },	
		        axisLine:{
                    lineStyle:{
                        color:'#d4d4d4',
                        width:0,//这里是为了突出显示加上的
                    }
                },
		    },
		    series: [
		        {
		            name:'平均首次回复时长',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		            itemStyle: {
		                color: '#FF882C',
		                shadowColor: 'rgb(255 179 120 / 50%)',
		                shadowBlur: 9.5,
		            },
		            lineStyle: {
		                shadowColor: "rgb(255 179 120 / 50%)",
		                shadowOffsetX: 0,
		                shadowOffsetY: 5,
		                opacity: 1,
		                shadowBlur: 5,
		                type: "solid",
		                width: 3,
		            },
		            areaStyle: {
		              normal: {
		                color: {
		                  x: 0,
		                  y: 0,
		                  x2: 0,
		                  y2: 1,
		                  colorStops: [{
		                      offset: 0,
		                      color: "rgba(255, 189, 87, 0.2)" // 0% 处的颜色
		                    }, {
		                      offset: 0.7,
		                      color: "rgba(255, 255, 255, 0.1)" // 100% 处的颜色
		                     }],
		                      globalCoord: false // 缺省为 false
		                    }
		                  }
		            },
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option1);

		// 自适应
		window.addEventListener("resize",function (){
			myChart1.resize();
		});

    </script>
    <script type="text/javascript">
		// 点击事件 近一周 近二周 近一月 切换
		$('.NewStatistics_ChartsHeader_OtherList_container li').click(function(){
			$('.NewStatistics_ChartsHeader_OtherList_container li').removeClass('NewStatistics_ChartsHeader_OtherList_active');
			$(this).addClass('NewStatistics_ChartsHeader_OtherList_active');
		})
		// 点击事件切换echarts 类型
		$('.NewStatistics_EchartsHeader_container li').click(function(){
			$('.NewStatistics_EchartsHeader_container li').removeClass('NewStatistics_EchartsHeader_active');
			$(this).addClass('NewStatistics_EchartsHeader_active');
			var myChart1 = echarts.init(document.getElementById('main1'));
			let op = $(this).attr('data-id');
			if(op == 1){
				myChart1.setOption(option1,true)
			}else if(op == 2){
				myChart1.setOption(option2,true)
			}else if(op == 3){
				myChart1.setOption(option3,true)
			}else if(op == 4){
				myChart1.setOption(option4,true)
			}else if(op == 5){
				myChart1.setOption(option5,true)
			}
			
		})
	</script>
</body>
</html>